<template>
  <div>
    <div id="xgplayer"></div>
    <!-- <div class="pos"></div> -->
    <!-- <div class="cover" @click="play()"> -->
    <!-- <div>poster:{{ poster }}</div> -->
    <!-- <div>m3u8:{{ m3u8 }}</div> -->
    <!-- <div>rtmp:{{ rtmp }}</div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import Player from 'xgplayer';
import { Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls.js';
import { bus } from '@/bus.js';

export default {
  name: 'xg',
  props: {
    poster: {
      type: String,
      default: () => {
        return 'poster';
      },
    },
    m3u8: {
      type: String,
      default: () => {
        return 'm3u8';
      },
    },
    rtmp: {
      type: String,
      default: () => {
        return 'rtmp';
      },
    },
    className: {
      type: Array,
      default: () => {
        return ['video-box', 'box-16b9'];
      },
    },
    options: {
      type: Object,
      default() {
        return {
          aspectRatio: '16:9',
          autoplay: false,
          muted: true,
          preload: 'auto',
          controls: true,
        };
      },
    },
  },
  data() {
    return {
      url:
        'https://cn-gdfs-ct-01-21.bilivideo.com/live-bvc/419561/live_631070414_76624936_hevc/index.m3u8?expires=1755699011&len=0&oi=1033508095&pt=web&qn=400&trid=1007031fc84f588c5cf618c71fb79d68a5c9&bmt=1&sigparams=cdn,expires,len,oi,pt,qn,trid,bmt&cdn=cn-gotcha01&sign=f9d2b1359ceb224430038c8d78715cff&site=69ff9159643a491d641b9e8bd17ab21f&free_type=0&mid=400216183&sche=ban&bvchls=1&sid=cn-gdfs-ct-01-21&chash=1&sg=lr&trace=8388625&isp=ct&rg=East&pv=Fujian&strategy_types=0,1&score=63&strategy_type=0&deploy_env=prod&flvsk=3aadb429aed35276e2863547266cfe00&long_ab_flag_value=test&source=puv3_onetier&long_ab_flag=live_default_longitudinal&info_source=cache&origin_bitrate=907263&long_ab_id=45&hdr_type=0&hot_cdn=909773&expected_qn=400&strategy_id=37&sk=9398a0469235b6fd79f46daa73cbe9a9&pp=srt&media_type=0&p2p_type=1&strategy_ids=37,37&sl=3&strategy_version=latest&suffix=hevc&ld=fylg&codec=1&vd=nc&zoneid_l=151371777&sid_l=live_631070414_76624936_hevc&src=puv3&order=1',

      // 'https://cn-jsnt-ct-01-24.bilivideo.com/live-bvc/962286/live_406986743_49167407_prohevc/index.m3u8',
      // 'https://boliu.chenxi618.com/xxt1/sn1.m3u8',
      // 'https://cn-jsyz-ct-03-29.bilivideo.com/live-bvc/826051/live_416861708_87103591/index.m3u8?expires=1752137336&len=0&oi=1964825814&pt=web&qn=10000&trid=100762e0ad8c3d06ec9e420c5274b4686f70&bmt=1&sigparams=cdn,expires,len,oi,pt,qn,trid,bmt&cdn=cn-gotcha01&sign=1284f3ef9a25949b8e20ca65462be072&site=e0fa4633578539a783111fe6a36c948b&free_type=0&mid=400216183&sche=ban&bvchls=1&sid=cn-jsyz-ct-03-29&chash=1&sg=lr&trace=25&isp=ct&rg=East&pv=Fujian&sl=1&pp=srt&long_ab_id=45&strategy_version=latest&origin_bitrate=615014&long_ab_flag_value=test&hot_cdn=0&expected_qn=10000&flvsk=49b2297e01227757bd727ae747094164&strategy_types=0&suffix=origin&sk=f3edee0d0b70b2dffe8f5aa90c7cb899&codec=0&strategy_id=60&info_source=cache&deploy_env=prod&ld=xscd&p2p_type=1&strategy_ids=60&strategy_type=0&hdr_type=0&source=puv3_onetier&long_ab_flag=live_default_longitudinal&score=1&vd=nc&zoneid_l=151371777&sid_l=stream_name_cold&src=puv3&order=1',
      player: null,
      xgConfig: null,
    };
  },
  computed: {},
  methods: {
    planB: function() {
      this.$emit('planB');
    },
    play: function() {
      if (!this.player) return;
      this.player.play();
    },
    resetXGConfig: function(m3u8) {
      let config = {
        id: 'xgplayer',
        // el: document.querySelector('#xgplayer'),
        url: m3u8, //
        isLive: true,
        plugins: [HlsPlugin],
        autoplay: true,
        autoplayMuted: false,
        // poster: this.poster,
        fluid: true,
        width: '100%',
        height: '100%',
        minWaitDelay: 1000,
        pip: {
          showIcon: false, // 显示画中画切换按钮（默认false）
          preferDocument: false, // 是否使用文档画中画模式（默认false）
          width: 320, // 画中画窗口宽度（默认自动计算）
          height: 180, // 画中画窗口高度（默认自动计算）
        },
      };
      this.xgConfig = config;
      return config;
    },
    try2play: function(url) {
      let tVue = this;
      // alert('m3u8:' + this.m3u8);

      new Promise((resolve, reject) => {
        let xgConfig = this.resetXGConfig(url);
        resolve(xgConfig);
      })
        .then((xgConfig) => {
          tVue.player = new Player(xgConfig);
          return tVue.player;
        })
        .then(() => {
          tVue.player.play();
          tVue.player.on(Events.PLAY, () => {
            console.log('play');
          });
          tVue.player.on(Events.ERROR, (error) => {
            console.log('error');
            tVue.$emit('planB');
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    let isSupported = HlsPlugin.isSupported();

    bus.$once('获得推流地址', (res) => {
      this.$nextTick(() => {
        // this.try2play(res.videoLiveUrl);
        // alert('emit:' + res.videoLiveUrl);
        if (isSupported) {
          setTimeout(() => {
            this.try2play(res.videoLiveUrl);
          }, 1000);
        } else {
          this.$emit('planB');
        }
      });
    });
  },
};
</script>
<style lang="less" scoped>
.cover {
  position: absolute;
  top: 0;
  bottom: 70%;
  left: 0;
  right: 0;
  color: #fff;
}
.pos {
  position: absolute;
  top: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
